iT邦幫忙

2023 iThome 鐵人賽

DAY 19
0
Vue.js

淺談vue3源碼,很淺的那種系列 第 24

[Day 23]ast抽象語法樹 - 1——前置準備

  • 分享至 

  • xImage
  •  

「你學姊離職以後我想了很多。她是一個很有責任感的人,時常加班到9、10點。我原本以為我陪著她一起加班就好,但直到她離開,我才意識到她可能已經累積了很多疲勞。」寫這篇草稿的前天,我主管和我聊天時如是說道:「這也是為什麼我現在都催你們下班,不再要求你們加班的原因。」

我從還是基層時,甚至在錄取之前的面試時,就一直在主張加班並不是一個好的文化。有上進心的員工下班時間會持續充實自己,讓員工準時下班無疑是在促進員工的成長,讓員工加班就是在扼殺團隊的未來。所以雖然那位學姊的離開也對我造成很大的打擊,但至少她的離開為我主管帶來了質變級的成長,落寞之餘也算是有那麼一絲寬慰。

扯遠了。我想說的是,責任感較強的人容易在無形之中產生內耗。升上主任以後,或者說升上去之前,我就一直把提升其他夥伴的能力當作自己的任務,下班後也持續充實自己,或許我也在不知不覺間磨損了也說不定。

所以我決定在鐵人賽水更多篇幅,無情開擺(?)


昨天我們寫了個h函數,可以將解析好的html標籤變成虛擬dom,所以今天我們就要來解析開發者寫的template。

先新建一個文件/src/ast/parse.ts吧:

export const parse = (template: string) => {

};

然後我們明確一下目標,我們要把template的內容解析成能夠傳入昨天學習的h函數的格式,也就是說我們需要能夠解析template中的每一個標籤,並且把它的標籤種類、屬性、事件、內容全部拆開來。

遍歷這個template是必須的,然後在遍歷的途中,我們要有能力去區分目前遍歷到的部分是上標籤、標籤內容、還是下標籤。如果是上標籤,我們要能夠從中把標籤類型、屬性及事件拆開。所以流程大概是這樣:

至於具體怎麼實現就交給明天的我們吧~避免內耗嘛(?)


上一篇
[Day 22]總整理
下一篇
[Day 24]ast抽象語法樹 - 2——前置準備及明確目標
系列文
淺談vue3源碼,很淺的那種31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言